<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>运营中心</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
 		<style> .filter-list { margin: 20px 40px; padding: 0 10px 10px 10px;transition: all .2s ease-in-out; -webkit-transition:  all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition:  all .2s ease-in-out;  }  .filter-list .item { padding-top: 10px; padding-bottom: 7px; }  .filter_name { width: 80px; text-align: right; margin-right: 8px; }  .filter-list li { padding: 0px 8px; height: 23px; line-height: 23px; margin: 0 12px; cursor: pointer; }  .filter-content { margin: 0px 30px; margin-top: -10px; overflow: hidden; transition: all .2s ease-in-out; -webkit-transition:  all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition:  all .2s ease-in-out; }  .filter-content .item { width: 163.6px; height: 220px; border: 1px solid #ddd; margin: 10px; float: left; }  .filter-content .item .name { margin-left: 5px; margin-top: 3px; }  .filter-content .item .price { margin-top:5px; margin-right:5px;font-size:12px; }  .filter-list li:hover i.remove { height: 23px; background: url(images/iconlist.png) no-repeat; width: 20px; display: inline-block; vertical-align: middle; background-position: -209px -307px; } </style> </head>
	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/menu.js" type="text/javascript" charset="utf-8"></script><!-- BEGIN 右边内容区 -->
			<div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem active">
							<a href="yunyingCenter.html#yunying">公共主题</a>
						</li>
						<li class="tabItem">
							<a href="yunyingCenter.html#yunying">定制主题</a>
						</li>
						<li class="tabItem">
							<a href="yunyingCenter.html#yunying">未来式</a>
						</li>
					</ul>
				</div>

				<div class="">
					<div class="row filter-list over-hidden border">
						<div class="item over-hidden" data-cateid='1'>
							<label class=" filter_name inline-block fl" data-key="color">风格：</label>
							<ul class=" fl">
								<li class="bgblue selectedAll">全部</li>
								<li class="" data-id="1">大荒缘</li>
								<li class="" data-id="2">习水大曲</li>
								<li class="" data-id="3">劲酒</li>
								<li class="" data-id="4">节假日</li>
								<li class="" data-id="5">简约</li>
							</ul>
						</div>

						<div class="item over-hidden" data-cateid='2'>
							<label class=" filter_name inline-block fl" data-key="color">收费方式：</label>
							<ul class="fl">
								<li class="bgblue selectedAll">全部</li>
								<li class="" data-id="6">收费</li>
								<li class="" data-id="7">免费</li>
							</ul>
						</div>

						<div class="over-hidden resultFilters" style="padding-top: 10px;padding-bottom: 7px;">
							<label class=" filter_name inline-block fl" data-key="color">已选条件：</label>
							<div class="fl nofilter" style="color:#999;padding-left:12px;">暂时没有选择过滤条件</div>
							<ul class="fl">

							</ul>
						</div>

					</div>

					<div class="filter-content row" id="itemContainer">
						<div class="item">
							<img class="lazy" data-original="images/yunying/product.png"  height="168">
							<p class="name">618年终大促</p>
							<p class="red fr price">￥5</p>
						</div>
					</div>
					<div class="pagelist fr" style="margin:30px 40px 40px 0;">
						<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
						<div class="pagination inline-block fl"></div>
						<div class="inline-block fl">
							到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
						</div>

					</div>

				</div>

			</div>
			<!-- END 右边内容区 -->

		</div>
		<!-- END CONTAINER -->

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/yunying.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
		
		<script>
		   $("img.lazy").lazyload({ effect : "fadeIn" });
		   
			var pageObj = new pageFun();
			var currentpage=1,perPage=10,totalNumber=50; 		
			pageObj.pageNoObj= $('#pageNo');
			//这里是异步的获取数据的函数
			pageObj.submitFun = function(currentpage) {
				var data = [{
					'id': 1,
					'name': '618年终大促' + currentpage,
					'img': 'images/yunying/product.png',
					'price': '6000',

				}, {
					'id': 2,
					'name': '618年终大促' + currentpage,
					'img': 'images/yunying/product.png',
					'price': '9000',

				}, {
					'id': 3,
					'name': '好酒买买提葡萄牙膏' + currentpage,
					'img': 'images/yunying/product.png',
					'price': '3000',
				}];
				//返回新的数组
				var html = '';
				for(var i = 0; i < data.length; i++) {
					html += '<div class="item"> <img class="lazy" src="images/grey.gif" data-original="' + data[i].img + '" height="168" width="161.6"> <p class="name text-ellipsis">' + data[i].name + '</p> <p class="red fr price">￥' + data[i].price + '</p> </div>';
				};
				$('.filter-content').html(html);
				$("img.lazy").lazyload({ effect : "fadeIn" });
			}

			/*参数每页多少个,当前页,总个数,容器的ID*/
			pageObj.init(perPage, currentpage, totalNumber, 'itemContainer');


			var filterevent = new FilterObj();
			filterevent.ajaxGetData=function(){
				var selectArr=filterevent.selectArr; 
				for(key in selectArr) {
					// selectArr[key]['name']是获取筛选的内容
					// selectArr[key]['id']是获取筛选的ID
				}
			}
			filterevent.filter();
			
			//删除筛选条件
			function removeFilter(obj) {
				filterevent.removeFilter(obj);
			}

			
			
		</script>

	</body>

</html>